<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
<div id="tab">
    <nav class="navbar navbar-default" style="height: 100%;margin: 0px">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand">学生选课管理</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/toCourse">课程管理</a></li>
                    <li><a href="/login">学生管理</a></li>
                    <li><a href="/toChoice">选课管理</a></li>
                    <li><a href="/toDetail">选课明细表</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="panel-heading">
        <div class="col-sm-2" id="so">
            <div class="input-group">
                <input type="text" placeholder="输入学号" class="form-control" id="value"/>
                <span class="input-group-addon"><a @click="queryCourse(1)"><i class="glyphicon glyphicon-search"></i></a></span>
            </div>
            <br>
        </div>
    </div>
    <div>
        <!-- Table -->
        <table class="table">
            <tr class="bg-primary">
                <th>学号</th>
                <th>课程编号</th>
                <th>课程名称</th>
                <th>学分</th>
                <th>学时</th>
                <th>备注</th>
                <th></th>
            </tr>
            <tr v-for="list in ShowIndexList">
                <td>{{list.sid}}</td>
                <td>{{list.cid}}</td>
                <td>{{list.name}}</td>
                <td>{{list.credit}}</td>
                <td>{{list.period}}</td>
                <td>{{list.remark}}</td>
                <td></td>
            </tr>
        </table>
    </div>
    <!-- 底部 -->
    <div class="navbar navbar-default navbar-fixed-bottom" style="height: 50px">
        <div class="container" align="center" style="margin-top: -13px" >
            <ul class="pagination" >
                <li>
                    <a aria-label="Previous" @click="firstPage()">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a aria-label="Previous" @click="sPage()">
                        <span aria-hidden="true">&#139;</span>
                    </a>
                </li>
                <li class="active"><a>{{cols}}<span class="sr-only">(current)</span></a></li>
                <li>
                    <a aria-label="Next" @click="xPage()">
                        <span aria-hidden="true">&#155;</span>
                    </a>
                </li>
                <li>
                    <a aria-label="Next" @click="lastPage()">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script>
    /*import Vue from "vue";
    import axios from "axios";
    Vue.prototype.$axios = axios;*/
    let app = new Vue({
        el:"#tab",
        data:{
            ShowIndexList:[],//表格数据

            count:"",//数据总行数
            cols: 1,//当前页数，默认为1
            limit: 10,//每页行数
            maxcols: 0,//最大总页数
        },
        methods:{

            //回调函数调用的方法，从后台获取数据，渲染页面
            ShowIndex: function () {
                axios.post('http://localhost:3003/show',{
                    data:{
                        cols:this.cols,
                        limit:this.limit
                    }
                }).then(response => {
                    this.ShowIndexList = response.data.retJoin;
                    this.count = response.data.count;
                })
            },
            //模糊查询，分页查询
            queryCourse: function (status){
                //如果点击的是搜索，要重新给cols赋值
                if (status == 1){
                    this.cols = 1;
                }
                let val = $('#value').val();
                axios.post('http://localhost:3003/query',{
                    data:{
                        val,
                        cols:this.cols,
                        limit:this.limit
                    }
                }).then(response=>{
                    this.ShowIndexList = response.data.retJoin;
                    this.count = response.data.count;
                })
            },
            //第一页
            firstPage: function (){
                if (this.cols != 1)
                    this.cols = 1;
                this.queryCourse();
            },
            //上一页
            sPage: function(){
                if (this.cols != 1)
                    this.cols--;
                this.queryCourse();
            },
            //下一页
            xPage: function(){
                console.log(this.cols)
                console.log(this.limit)
                console.log(this.count)
                if (this.cols*this.limit<this.count){
                    this.cols++;
                    console.log(this.cols)
                }
                this.queryCourse();
            },
            //最后一页
            lastPage: function () {
                //计算最大总页数
                if (this.count%this.limit == 1)
                    this.maxcols = parseInt(this.count/this.limit);
                else
                    this.maxcols = parseInt(this.count/this.limit+1);
                if (this.cols != this.maxcols){
                    this.cols = this.maxcols;
                    this.queryCourse();
                }
            },
        },
        //钩子函数
        created() {
            this.ShowIndex();
        }
    })
</script>
</html>